import React, { useState, useEffect } from 'react';
import { Input, Checkbox } from 'antd';

const TitleView: React.FC<Banner.ITitleViewProps> = (props) => {
  const { onChange, value: formValue } = props;
  const [value, setValue] = useState<Banner.TitleValue>(
    formValue || { show: false, name: '' },
  );

  useEffect(() => {
    onChange && onChange(value);
  }, [value]);

  return (
    <>
      <Checkbox
        style={{
          marginRight: 4,
        }}
        defaultChecked={value.show}
        onChange={(e) => {
          setValue({
            ...value,
            show: e.target.value,
          });
        }}
      ></Checkbox>
      <Input
        defaultValue={value.name}
        onChange={(e) => {
          setValue({
            ...value,
            name: e.target.value,
          });
        }}
      />
    </>
  );
};

export default TitleView;
